//获取操作对象
var box = document.querySelector('.contianer')
//获取url地址栏中的参数
var search = location.search
//获取当前账号
var name1 = getCookie('name')
// console.log(name1)
//存放当前商品信息的对象
var o1
//判断当前search是否有值
if (search) {
    //获取当前参数的值
    var id = search.split('=')[1];
    //使用async和await去服务端获取当前id所对应的数据
    (async function () {
        var txt = await PromiseAjax({
            url: "../php/xiangqing.php",
            data: "uid=" + id
        })
        // console.log(txt)
        //把当前字符串转为对象
        o1 = eval('(' + txt + ')')
        //创建字符串，存放需要渲染的内容
        var str = `
            <div class="product-intro clearfix">
                <div class="gallery">
                    <div class="leftBox">
                        <img src="${o1.src}" alt="">
                        <div class="mark"></div>
                    </div>
                    <div class="rightBox">
                        <img src="${o1.src}" alt="">
                    </div>
                    <div class="hd">
                        <a class="sPrev"></a>
                        <a class="sNext"></a>
                        <ul>
                            <li class="lis">
                                <img class="on" src="${o1.src}" alt="">
                            </li>
                            <li class="lis">
                                <img src="../img/201804081317422841.jpg" alt="">
                            </li>
                            <li class="lis">
                                <img src="../img/202002281056166019.jpg" alt="">
                            </li>
                            <li class="lis">
                                <img src="../img/202002281056357663.jpg" alt="">
                            </li>
                            <li class="lis">
                                <img src="../img/202002281100531892.jpg" alt="">
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="productSummary">
                    <h1>${o1.title} </h1>
                    <div class="longTitle">${o1.name}</div>
                    <ul>
                        <li>
                            价格：
                            <strong class="price">${o1.price}</strong>
                        </li>
                        <li>商品编号：CDS- 810S</li>
                    </ul>
                    <ul>
                        <li>配送说明：满额包邮(不满70运费20)</li>
                        <li>
                            库存：
                            <a href="#">1</a>
                        </li>
                    </ul>
                    <ul>
                        <li class="colorStyle clearfix">
                            <dl>
                                <dt>购买数量：</dt>
                                <dd>
                                    <div class="wrap-input">
                                        <button type="button" class="btn btn-default">-</button>
                                        <button type="button" class="btn btn-default">1</button>
                                        <button type="button" class="btn btn-default">+</button>
                                    </div>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                    <div class="btn_add">
                        <ul class="clearfix">
                            <li class="btn_addFav">
                                <a href="../html/cart.html">立即购买</a>
                            </li>
                            <li class="btn_addCart">
                                <a href="#">加入购物车</a>
                            </li>
                            <li class="btn_addFav">
                                <a href="#">加入收藏</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        `
        /* -----------------放大镜------------------ */
        //把当前拼接好的内容，渲染到大盒子中
        box.innerHTML = str
        //获取操作对象
        var leftBox = document.querySelector(".leftBox")
        var mark = document.querySelector(".mark")
        var rightBox = document.querySelector(".rightBox")
        var rightImg = rightBox.querySelector("img")
        var lis = document.querySelectorAll(".lis")
        var bigbox = document.querySelector(".product-intro")
        //给左边盒子绑定事件
        leftBox.onmouseover = function () {
            //显示蒙版层和右边盒子
            mark.style.display = 'block'
            rightBox.style.display = "block"
        }
        leftBox.onmouseout = function () {
            //鼠标移出关闭蒙版层和右边盒子
            mark.style.display = "none"
            rightBox.style.display = "none"
        }
        leftBox.onmousemove = function (e) {
            //兼容事件对象
            var e = e || window.event
            //获取蒙版层的移动距离
            /* var left1 = e.pageX - 250 - leftBox.offsetLeft - parseInt(mark.offsetWidth / 2)
            var top1 = e.pageY -220 - leftBox.offsetTop - parseInt(mark.offsetHeight / 2) */
            var left1 = e.pageX - bigbox.offsetLeft - leftBox.offsetLeft - parseInt(mark.offsetWidth / 2)
            var top1 = e.pageY - bigbox.offsetTop - leftBox.offsetTop - parseInt(mark.offsetHeight / 2)
            //给蒙版层设置边界
            var maxX = leftBox.offsetWidth - mark.offsetWidth
            var maxY = leftBox.offsetHeight - mark.offsetHeight
            //右边图片的移动距离
            var imgX, imgY
            //判断水平方向
            if (left1 <= 0) {
                mark.style.left = "0px"
                imgX = 0
            } else if (left1 >= maxX) {
                mark.style.left = maxX + 'px'
                imgX = maxX
            } else {
                mark.style.left = left1 + 'px'
                imgX = left1
            }

            //垂直方向
            if (top1 <= 0) {
                mark.style.top = "0px"
                imgY = 0
            } else if (top1 >= maxY) {
                mark.style.top = maxY + 'px'
                imgY = maxY
            } else {
                mark.style.top = top1 + 'px'
                imgY = top1
            }
            //移动右边的图片
            rightImg.style.left = -2 * imgX + 'px'
            rightImg.style.top = -2 * imgY + 'px'
        }
        //遍历li对象
        for (var i = 0; i < lis.length; i++) {
            //给每个li对象绑定点击事件
            lis[i].onclick = function () {
                //清除所有li对象中的class属性
                for (var j = 0; j < lis.length; j++) {
                    lis[j].lastElementChild.className = ''
                }
                //获取当前li对象中img的图片地址
                var url = this.lastElementChild.getAttribute('src')
                //把当前图片地址赋值给上面的图片
                leftBox.firstElementChild.setAttribute('src', url)
                rightImg.setAttribute('src', url)
                // console.log(url)
                //给当前点击的li对象添加class属性
                // console.log(this.lastElementChild.className)
                this.lastElementChild.className = 'on'
            }
        }
    })()
} else {
    alert("非法进入")
    location = './list.html'
}


//给大盒子对象绑定点击事件
box.onclick = function (e) {
    //事件对象兼容
    var e = e || window.event
    //获取操作目标
    var tg = e.target || e.srcElement
    //判断当前点击的按钮是否为“加入购物车”
    if (tg.innerHTML == "加入购物车") {
        // console.log(11)
        //判断当前name1是否有值
        if (name1) {
            //获取该账号在localStorage中存储的商品信息
            var lists = localStorage.getItem(name1) || "[]"
            //把当前获取的内容，转为数组对象
            lists = eval('(' + lists + ')')
            //判断当前数组中是否有元素
            if (lists.length > 0) {
                //设置开关判断，true表示该商品存在，false表示不存在
                var bool = false
                //遍历数组元素
                lists.forEach(item => {
                    //判断数组中的商品id是否等于当前添加的商品id
                    if (o1.id == item.id) {
                        //直接修改当前商品的数量
                        item.cart_number++
                        bool = true
                    }
                })
                if (bool) {
                    //把当前数组存放到localStorage中
                    localStorage.setItem(name1, JSON.stringify(lists))
                } else {
                    //修改当前商品的数量
                    o1['cart_number'] = 1
                    //直接把当前要添加的商品存放到数组
                    lists.push(o1)
                    //把当前数组存放到localStorage中
                    localStorage.setItem(name1, JSON.stringify(lists))
                }
                // console.log(lists)
            } else {
                //修改当前商品的数量
                o1['cart_number']=1
                //直接把当前要添加的商品存放到数组
                lists.push(o1)
                //把当前数组存放到localStorage中
                localStorage.setItem(name1, JSON.stringify(lists))
            }
        } else {
            alert("你还未登录")
            //获取当前url
            var url = location.href
            //跳转到登录页
            location = "../html/login.html?url2=" + url
        }
    }
}